<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>智慧农业SaaS平台</title>
    <link rel="shortcut icon" href="favicon.ico">

    <!-- 引入样式 -->
    <link rel="stylesheet" href="plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="styles/common.css"/>
    <link rel="stylesheet" href="styles/index.css"/>
    <link rel="stylesheet" href="styles/icon/iconfont.css"/>
    <style>
        .body {
            min-width: 1366px;
        }

        .app-main {
            height: calc(100% - 64px);
        }

        .app-main .divTmp {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
<div class="app" id="app">
    <div class="app-wrapper openSidebar clearfix">
        <!-- sidebar -->
        <div class="sidebar-container">
            <div class="logo">
                <!-- <img src="images/logo.png" width="122.5" alt="" /> -->
                <img src="images/login/login-logo.png" alt="" style="width: 117px; height: 32px"/>
            </div>

            <el-scrollbar wrap-class="scrollbar-wrapper">
                <el-menu
                        :default-active="defAct"
                        :unique-opened="false"
                        :collapse-transition="false"
                        background-color="#343744"
                        text-color="#bfcbd9"
                        active-text-color="#f4f4f5"
                >
                    <div v-for="item in menuList" :key="item.id">
                        <el-submenu :index="item.id" v-if="item.children && item.children.length>0">
                            <template slot="title">
                                <i class="iconfont" :class="item.icon"></i>
                                <span>{{item.name}}</span>
                            </template>
                            <el-menu-item
                                    v-for="sub in item.children"
                                    :index="sub.id"
                                    :key="sub.id"
                                    @click="menuHandle(sub,false)"
                            >
                                <i class="iconfont" :class="sub.icon"></i>
                                <span slot="title">{{sub.name}}</span>
                            </el-menu-item
                            >
                        </el-submenu>
                        <el-menu-item v-else :index="item.id" @click="menuHandle(item,false)">
                            <i class="iconfont" :class="item.icon"></i>
                            <span slot="title">{{item.name}}</span>
                        </el-menu-item>
                    </div>
                </el-menu>
            </el-scrollbar>
        </div>
        <div class="main-container">
            <!-- <navbar /> -->
            <div class="navbar">
                <div class="head-lable">
              <span v-if="goBackFlag" class="goBack" @click="goBack()"
              ><img src="images/icons/btn_back@2x.png" alt=""/> 返回</span
              >
                    <span>{{headTitle}}</span>
                </div>
                <div class="right-menu">
                    <div class="avatar-wrapper">{{ userInfo.username }}</div>
                    <img src="images/icons/btn_close@2x.png" class="outLogin" alt="退出" @click="logout()"/>
                </div>
            </div>
            <div class="app-main" v-loading="loading">
                <div class="divTmp" v-show="loading"></div>
                <iframe
                        id="cIframe"
                        class="c_iframe"
                        name="cIframe"
                        :src="iframeUrl"
                        width="100%"
                        height="auto"
                        frameborder="0"
                        v-show="!loading"
                ></iframe>
            </div>
        </div>
    </div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="plugins/axios/axios.min.js"></script>
<script src="js/request.js"></script>
<script src="./api/login.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                defAct: '',
                menuActived: '',
                userInfo: {},
                menuList: [],
                iframeUrl: '',
                headTitle: '',
                goBackFlag: false,
                loading: true,
                timer: null
            }
        },
        methods: {
            logout() {
                console.log("退出方法")

                logout().then((res) => {
                    if (res.code === 1) {
                        localStorage.removeItem('userInfo');//清理本地存储的用户信息
                        window.location.href = './page/login/login.html'//跳转登录页面
                    }
                })
            },
            goBack() {
                const menu = this.menuList.find(item => item.id === this.menuActived);
                this.menuHandle(menu, false)
            },
            menuHandle(item, goBackFlag) {
                console.log("menuHandle"+JSON.stringify(item));
                this.loading = true;
                this.menuActived = item.id;
                this.iframeUrl = item.curl;
                this.headTitle = item.name;
                this.goBackFlag = goBackFlag;
                this.closeLoading()
            },
            closeLoading() {
                this.timer = null;
                this.timer = setTimeout(() => {
                    this.loading = false
                }, 100)
            },
            initMenuList(){
                /*this.menuList = [
                    {"id":"1","parentId":null,"parentName":null,"name":"系统管理","layerNum":null,"isLeaf":null,"ico":null,"cpermission":null,"curl":null,"ctype":null,"state":null,"belong":null,"cwhich":null,"quoteNum":null,"remark":null,"orderNo":null,
                        "children":[
                            {"id":"10","parentId":"1","parentName":"系统管理","name":"企业管理","layerNum":null,"isLeaf":"1","ico":null,"cpermission":"企业管理","curl":"page/company/list.html","ctype":null,"state":"1","belong":null,"cwhich":null,"quoteNum":null,"remark":null,"orderNo":"2","children":null},
                            {"id":"11","parentId":"1","parentName":"系统管理","name":"用户管理","layerNum":null,"isLeaf":"1","ico":null,"cpermission":"用户管理","curl":"page/sys/user/list.html","ctype":null,"state":"1","belong":null,"cwhich":null,"quoteNum":null,"remark":null,"orderNo":"3","children":null},{"id":"12","parentId":"1","parentName":"系统管理","name":"角色管理","layerNum":null,"isLeaf":"1","ico":null,"cpermission":null,"curl":"page/sys/role/list.html","ctype":null,"state":"1","belong":null,"cwhich":null,"quoteNum":null,"remark":null,"orderNo":"4","children":null},{"id":"13","parentId":"1","parentName":"系统管理","name":"模块管理","layerNum":null,"isLeaf":"1","ico":null,"cpermission":null,"curl":"page/sys/module/list.html","ctype":null,"state":"1","belong":null,"cwhich":null,"quoteNum":null,"remark":null,"orderNo":"5","children":null},{"id":"14","parentId":"1","parentName":"系统管理","name":"日志查询","layerNum":null,"isLeaf":"1","ico":null,"cpermission":null,"curl":"page/sys/log/list.html","ctype":null,"state":"1","belong":null,"cwhich":null,"quoteNum":null,"remark":null,"orderNo":"6","children":null}]},{"id":"2","parentId":null,"parentName":null,"name":"设施管理","layerNum":null,"isLeaf":null,"ico":null,"cpermission":null,"curl":null,"ctype":null,"state":null,"belong":null,"cwhich":null,"quoteNum":null,"remark":null,"orderNo":null,"children":[{"id":"20","parentId":"2","parentName":"设施管理","name":"设施分类","layerNum":null,"isLeaf":"1","ico":null,"cpermission":null,"curl":"page/facilities/category/list.html","ctype":null,"state":"1","belong":null,"cwhich":null,"quoteNum":null,"remark":null,"orderNo":"8","children":null},{"id":"21","parentId":"2","parentName":"设施管理","name":"大棚管理","layerNum":null,"isLeaf":"1","ico":null,"cpermission":null,"curl":"page/facilities/facility/list.html","ctype":null,"state":"1","belong":null,"cwhich":null,"quoteNum":null,"remark":null,"orderNo":"9","children":null},{"id":"22","parentId":"2","parentName":"设施管理","name":"大棚配置","layerNum":null,"isLeaf":"1","ico":null,"cpermission":null,"curl":"page/facilities/config/list.html","ctype":null,"state":"1","belong":null,"cwhich":null,"quoteNum":null,"remark":null,"orderNo":"10","children":null}]},{"id":"3","parentId":null,"parentName":null,"name":"智能设备","layerNum":null,"isLeaf":null,"ico":null,"cpermission":null,"curl":null,"ctype":null,"state":null,"belong":null,"cwhich":null,"quoteNum":null,"remark":null,"orderNo":null,"children":[{"id":"30","parentId":"3","parentName":"智能设备","name":"设备分类","layerNum":null,"isLeaf":"1","ico":null,"cpermission":null,"curl":"page/device/category/list.html","ctype":null,"state":null,"belong":null,"cwhich":null,"quoteNum":null,"remark":null,"orderNo":"12","children":null},{"id":"31","parentId":"3","parentName":"智能设备","name":"设备管理","layerNum":null,"isLeaf":"1","ico":null,"cpermission":null,"curl":"page/device/device/list.html","ctype":null,"state":null,"belong":null,"cwhich":null,"quoteNum":null,"remark":null,"orderNo":"13","children":null},{"id":"32","parentId":"3","parentName":"智能设备","name":"操作日志","layerNum":null,"isLeaf":"1","ico":null,"cpermission":null,"curl":"page/device/log/list.html","ctype":null,"state":null,"belong":null,"cwhich":null,"quoteNum":null,"remark":null,"orderNo":"14","children":null}]},{"id":"4","parentId":null,"parentName":null,"name":"统计分析","layerNum":null,"isLeaf":null,"ico":null,"cpermission":null,"curl":null,"ctype":null,"state":null,"belong":null,"cwhich":null,"quoteNum":null,"remark":null,"orderNo":null,"children":[{"id":"40","parentId":"4","parentName":"统计分析","name":"统计数据","layerNum":null,"isLeaf":"1","ico":null,"cpermission":null,"curl":"page/stat/stat.html","ctype":null,"state":null,"belong":null,"cwhich":null,"quoteNum":null,"remark":null,"orderNo":null,"children":null},{"id":"41","parentId":"4","parentName":"统计分析","name":"温湿度传感器统计数据","layerNum":null,"isLeaf":"1","ico":null,"cpermission":null,"curl":"page/stat/statistics/list.html","ctype":null,"state":null,"belong":null,"cwhich":null,"quoteNum":null,"remark":null,"orderNo":null,"children":null},{"id":"42","parentId":"4","parentName":"统计分析","name":"继电器操作数据统计","layerNum":null,"isLeaf":"1","ico":null,"cpermission":null,"curl":"page/stat/relay/list.html","ctype":null,"state":null,"belong":null,"cwhich":null,"quoteNum":null,"remark":null,"orderNo":null,"children":null}]},{"id":"5","parentId":null,"parentName":null,"name":"预警管理","layerNum":null,"isLeaf":null,"ico":null,"cpermission":null,"curl":null,"ctype":null,"state":null,"belong":null,"cwhich":null,"quoteNum":null,"remark":null,"orderNo":null,"children":[{"id":"50","parentId":"5","parentName":"预警管理","name":"预警信息","layerNum":null,"isLeaf":"1","ico":null,"cpermission":null,"curl":"page/earlywarning/list.html","ctype":null,"state":null,"belong":null,"cwhich":null,"quoteNum":null,"remark":null,"orderNo":null,"children":null}]},{"id":"6","parentId":null,"parentName":null,"name":"农作物管理","layerNum":null,"isLeaf":null,"ico":null,"cpermission":null,"curl":null,"ctype":null,"state":null,"belong":null,"cwhich":null,"quoteNum":null,"remark":null,"orderNo":null,"children":[{"id":"60","parentId":"6","parentName":"农作物管理","name":"农作物","layerNum":null,"isLeaf":"1","ico":null,"cpermission":null,"curl":"page/crop/list.html","ctype":null,"state":null,"belong":null,"cwhich":null,"quoteNum":null,"remark":null,"orderNo":null,"children":null},{"id":"61","parentId":"6","parentName":"农作物管理","name":"原料厂商管理","layerNum":null,"isLeaf":"1","ico":null,"cpermission":null,"curl":"page/factory/list.html","ctype":null,"state":null,"belong":null,"cwhich":null,"quoteNum":null,"remark":null,"orderNo":null,"children":null}]}];
                this.iframeUrl = this.menuList[0].children[0].curl;
                this.headTitle = this.menuList[0].name;
                this.defAct = this.menuList[0].children[0].id;
                this.menuActived = this.menuList[0].id;*/

                findMenu().then(res => {
                    if (String(res.code) === '1') {
                        console.log(res.data);
                        this.menuList = res.data;
                        this.iframeUrl = this.menuList[0].children[0].curl;
                        this.headTitle = this.menuList[0].name;
                        this.defAct = this.menuList[0].children[0].id;
                        this.menuActived = this.menuList[0].id;
                    } else {
                        this.$message.error(res.msg || '操作失败')
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
            }
        },
        created() {
            const userInfo = window.localStorage.getItem('userInfo');
            console.log("----------------");
            console.log(userInfo);
            console.log("----------------");
            console.log("created before initMenuList");
            this.initMenuList();
            console.log("after before initMenuList");
            this.closeLoading()
        },
        mounted() {
            console.log("before mounted");
            window.menuHandle = this.menuHandle;
            console.log("after mounted");
        },
        beforeDestroy() {
            this.timer = null
            clearTimeout(this.timer)
        },

    })
</script>
</body>
</html>
